<template>
  <div>
    <UserInfoCom/>
    <div class="form-center">
      <div style="width: 30%">
        <el-form v-model="data.user">
          <el-form-item v-if="data.user.account !='' && data.user.account && data.user.account !='null'"
                        label="唯一账号" style="text-align: left" label-width="120px">
            {{ data.user.account }}
          </el-form-item>
          <el-form-item v-else label="唯一账号" prop="account" label-width="120px">
            <el-input v-model="data.user.account" type="text" :disabled="data.disable"/>
          </el-form-item>
          <el-form-item prop="username" label="姓名" label-width="120px">
            <el-input v-model="data.user.username" :disabled="data.disable" type="text"></el-input>
          </el-form-item>
          <el-form-item prop="mobile" label="联系电话" style="text-align: left" label-width="120px">
            {{ data.user.mobile }}
          </el-form-item>
          <el-form-item prop="email" label="邮箱地址" label-width="120px">
            <el-input v-model="data.user.email" :disabled="data.disable" type="email"></el-input>
          </el-form-item>
          <el-form-item prop="dept" label="所属部门/公司" label-width="120px">
            <el-input v-model="data.user.email" :disabled="data.disable" type="text"></el-input>
          </el-form-item>
          <el-form-item prop="wechatId" label="微信ID" label-width="120px">
            <el-input v-model="data.user.wechatId" :disabled="data.disable" type="text"></el-input>
          </el-form-item>
          <el-form-item prop="tencentId" label="QQID" label-width="120px">
            <el-input v-model="data.user.tencentId" :disabled="data.disable" type="text"></el-input>
          </el-form-item>
          <el-form-item prop="sinaId" label="新浪ID" label-width="120px">
            <el-input v-model="data.user.sinaId" :disabled="data.disable" type="text"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" round @click="editUser">编辑</el-button>
            <el-button type="primary" round @click="updateUser" :style="{display: data.disable?'none':''}">保存
            </el-button>
            <el-button type="primary" round @click="cancel" :style="{display: data.disable?'none':''}">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {getCurrentInstance, reactive, ref} from "vue";
import UserInfoCom from "../components/UserInfoCom.vue";
import {ElMessage} from "element-plus";

export default {
  name: "UserDetailPage",
  components: {UserInfoCom},
  setup() {
    const {proxy} = getCurrentInstance()
    const data = reactive({
      disable: ref(true),
      user: {
        account: '',
        openId: ref(''),
        username: ref(''),
        mobile: ref(''),
        email: ref(''),
        dept: ref(''),
        domainAccount: ref(''),
        wechatId: ref(''),
        tencentId: ref(''),
        sinaId: ref(''),
      }
    })

    data.user = JSON.parse(localStorage.getItem("user_info"))

    const cancel = () => {
      proxy.data.user = JSON.parse(localStorage.getItem("user_info"))
      proxy.data.disable = !proxy.data.disable
    }

    const editUser = () => {
      proxy.data.disable = false
    }

    const updateUser = () => {
      proxy.$service.userUpdate(proxy.data.user).then(result => {
        if (result.res.code === 0) {
          localStorage.setItem("user_info", JSON.stringify(proxy.data.user))
          proxy.data.disable = true
          ElMessage.success({
            message: result.res.msg,
            type: 'success',
          })
          proxy.data.visible = false
        } else {
          ElMessage.error(result.res.msg)
        }
      })
    }


    return {data, updateUser, editUser, cancel}
  }
}
</script>

<style>
.form-center {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>